<template>
    <div>
      
        <div id="title">
            <div class="left" @click="$router.back()">
                <van-icon id="iconcccon" color="#fff" size="16" name="arrow-left" />
            </div>
            <div class="box1">{{house.community}}</div>
            <div class="box2"></div>
        </div>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img src="http://liufusong.top:8080/uploads/upload_226f57e8241cef48141eb699fca27284.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="http://liufusong.top:8080/uploads/upload_226f57e8241cef48141eb699fca27284.jpg" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
            </van-swipe-item>
        </van-swipe>

        <div class="consten">
            <van-cell-group id="cell-h">
                <van-cell id="cell-t" :title="house.title" />
                <div class="tag">
                    <span v-for="(item,index) in house.tags" :key="index" id="span">{{item}}</span>
                </div>
            </van-cell-group>
            <div id="cell-c">
                <div class="left">
                    <div class="top">
                        {{house.price}}
                        <span>/月</span>
                    </div>
                    <div class="bottom">
                        租金
                    </div>
                </div>
                <div class="center">
                    <div class="top">
                        {{house.roomType}}
                    </div>
                    <div class="bottom">
                        房型
                    </div>
                </div>
                <div class="right">
                    <div class="top">
                     {{house.size}}平米
                    </div>
                    <div class="bottom">
                        面积
                    </div>
                </div>
            </div>
            <div id="cell-d">
                <div class="left">
                        <p>
                            <span class="zhuang">装修 : </span>
                            <span class="zhuang2">精装</span>
                        </p>
                        <p>
                            <span class="lou">楼层 : </span>
                            <span class="lou2">{{house.floor}}</span>
                        </p>
                </div>
                <div class="right">
                     <p>
                            <span class="zhuang">朝向 : </span>
                            <span v-for="(item,index) in house.oriented" :key="index" class="zhuang2">{{item}}</span>
                        </p>
                        <p>
                            <span class="lou">类型 : </span>
                            <span class="lou2">普通住宅</span>
                        </p>
                </div>
            </div>
        </div>
        
            <div class="bgc"></div>

        <van-cell-group>
            <van-cell :title="house.community" />
        </van-cell-group>

        <div class="MapMap">
            <baidu-map center="嘉峪关"  class="bm-view">
                
            </baidu-map>
        </div>

  
        <van-cell-group id="home-amenities">
            <van-cell  title="房屋配套"  />
        </van-cell-group>

        <van-grid :column-num="5">
            <van-grid-item icon="photo-o" text="洗衣机" />
            <van-grid-item icon="photo-o" text="空调" />
            <van-grid-item icon="photo-o" text="天然气" />
            <van-grid-item icon="photo-o" text="电视" />
            <van-grid-item icon="photo-o" text="热水器" />
            <van-grid-item icon="photo-o" text="宽带" />
        </van-grid>

        <van-cell-group id="home-overview">
            <van-cell title="房源概况"  />
        </van-cell-group>

        <div class="home_over_master">

                <div class="top">
                    <div class="left">
                        <div class="pic">
                            <img src="http://liufusong.top:8080/img/avatar.png" alt="">
                        </div>
                        <div class="right11">
                            <p>王女士</p>
                            <span>
                                已认证房主
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="fasong">
                            发消息
                        </div>
                    </div>
                </div>

            <div class="txt">
                <p>
                    {{house.description ? house.description : "暂无详细消息"}}
                </p>
            </div>
        </div>

        <van-cell-group id="think-like">
            <van-cell title="猜你喜欢"  />
        </van-cell-group>

        <FindRoom  v-for="(item,index) in picList" :key="index" :picList="item" />

        <div id="poaF">
            <div @click="addList(house.houseCode)" class="son left">
                <van-icon  :color=" flag ? '#999' : 'red' " size="18" :name=" flag ? 'star-o' : 'star' " />
                收藏
                </div>
            <div class="son center">在线咨询</div>
            <div class="son right active-buttom">电话预约</div>
        </div>

    </div>
</template>

<script>
// 引入各种 Api
import { GuessApi ,getFindRoomDetailApi,addLikeListApi,delLikeListApi} from "@/api/FindRoom"
// 引入组件
import FindRoom from "@/components/FindRoom"
export default {
    props: {
    },
    data() {
        return {
            id:'',
            picList:[],
            params:{
                page_size: 3,
                cur_page: 1,
            },
            flag:true,
            house:{},
            pic:[]
        };
    },
    components: {
        // 找房组件
        FindRoom
    },
    async created() {
        
        // 获取 路由 传参 传过来的 id
        this.id =  this.$route.query.id
        // 获取  具体房屋详情
        const res = await getFindRoomDetailApi(this.id)
        console.log(res.body);
        this.house = res.body
        this.pic = res.body.houseImg.filter(item => {
                return item = `http://liufusong.top:8080${item}`
            })
        
        // 调用猜你喜欢
        this.getList()
    },
    methods: {
      // 获取猜你喜欢
      async getList () {
          try {
            // 获取猜你喜欢
          const list = await GuessApi(this.params)    
          const newlist = list.body.filter(item => item.houseImg = `http://liufusong.top:8080${item.houseImg}`)
          this.picList = newlist
        } catch(e) {
            console.log(e);
         }
        },

        // 点击收藏按钮时
        // async addList(id) {
        //     if(this.flag) {
        //         // 添加收藏
        //         const list = await addLikeListApi(id)
        //         console.log(list);
        //         this.flag = !this.flag

        //     } else {
        //         // 删除收藏
        //         const list = await delLikeListApi(id)
        //         console.log(list);
        //         this.flag = !this.flag 
        //     }
            
        // }
    },
};
</script>

<style scoped>
.bm-view {
    width: 375px;
    height: 145px;
}
.van-swipe-item img {
    width: 100%;
    height: 100%;
}
.bgc {
    height: 15px;
    width: 100%;
    background-color: #f6f5f6;
}
#cell-d {
    display: flex;
    
}
#cell-d .left{
    flex:1;
    padding-left: 10px;
}
#cell-d .left .zhuang{
    font-size: 13px;
    color: #999;
    margin-right: 15px;
}
#cell-d .left .zhuang2{
    font-size: 13px;
    color: #333;
}
#cell-d .left .lou{
    font-size: 13px;
    color: #999;
    margin-right: 15px;
}
#cell-d .left .lou2{
    font-size: 13px;
    color: #333;
}

#cell-d .right{
    flex:1;
    padding-left: 10px;
}
#cell-d .right .zhuang{
    font-size: 13px;
    color: #999;
    margin-right: 15px;
}
#cell-d .right .zhuang2{
    font-size: 13px;
    color: #333;
}
#cell-d .right .lou{
    font-size: 13px;
    color: #999;
    margin-right: 15px;
}
#cell-d .right .lou2{
    font-size: 13px;
    color: #333;
}

#cell-h {
    padding-bottom: 8px;
    width: 345px;
    border-bottom: 1px solid #e8e8e9;
}
#cell-h .tag {
   display: flex;
   padding: 5px 0;
}
#cell-c {
    height: 90px;
    width: 345px;
    border-bottom: 1px solid #e8e8e9;
    display: flex;
}
#cell-c .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cell-c .left .top {
    font-size: 18px;
    color: red;
    font-weight: 700;
}
#cell-c .center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cell-c .center .top {
    font-size: 18px;
    color: red;
    font-weight: 700;
}
#cell-c .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cell-c .right .top {
    font-size: 18px;
    color: red;
    font-weight: 700;
}
#cell-c .left .top span {
    color: red;
    font-size: 12px;
    font-weight: 400;
}
#cell-c .left .bottom {
    font-size: 14px;
    color: #999;
}
#cell-c .center .bottom {
    font-size: 14px;
    color: #999;
}
#cell-c .right .bottom {
    font-size: 14px;
    color: #999;
}
#cell-c .center {
    flex: 1;
}
#cell-c .right {
    flex: 1;
}
#cell-t {
    /* height: 50px; */
    width: 345px;
    font-size: 16px;
}
#cell-h #span {
    font-size: 12px;
    text-align: center;
    display: block;
    padding: 2px 5px;
    margin-left: 16px;
    background-color: #e1f5f8;
    color: #39becd;
}
.my-swipe {
    background-color: pink;
    height: 252px;
    width: 100%;
    margin-top: 45px;
}
#title {
    width: 100%;
    height: 45px;
    background-color: #21b97a;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
}
#title .left {
    flex: 1;
    line-height: 45px;
}
#title #iconcccon {
    margin-left: 16px;
}
#title .box1 {
    text-align: center;
    color: #fff;
    line-height: 45px;
    flex: 1;
}
#title .box2 {
    flex: 1;
}
.consten {
    width: 100%;
    /* background-color: #21b97a; */
    height: 266px;;
    padding: 15px;
}
.MapMap {
    width: 100%;
    height: 145px;
    background-color: #21b97a;
}
#poaF {
    position: sticky;  
    z-index: 99999999;
    position: fixed;
    bottom: 0;
    /* left: 0;
    right: 0; */
    width: 375px;
    height: 50px;
    display: flex;
}
#poaF .son {
    font-size: 17px;
    text-align: center;
    line-height: 50px;
    flex: 1;
    background-color: #fff;
    color: #999;
}
#poaF .center {
    border-left: 1px #e8e8e9 solid ;
    border-right: 1px #e8e8e9 solid ;
}
#poaF .active-buttom {
    border-top: 1px #21b97a solid ;
    background-color: #21b97a;
    color: #fff;
}

#home-amenities {
    width: 355px;
    height: 52px;
    color: #333;
    font-weight: 700;
    margin-left: 10px ;
    border-bottom: 1px #999 solid ;
}
.home-overview {
    width: 355px;
    height: 52px;
    color: #333;
    font-weight: 700;
    margin-left: 10px ;
    border-bottom: 1px #999 solid ;
}  
.home_over_master {
    width: 100%;
    /* height: 204px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home_over_master .top {
    display: flex;
    width: 355px;
    height: 62px;
}
.home_over_master .top .left {
    flex: 1;
    display: flex;
}
.home_over_master .top .left .pic {
    width: 52px;
    height: 52px;
    border-radius:30px ;
    background-color: #21b97a;
    margin: 5px 10px 0 0;
} 
.home_over_master .top .left .pic img {
width: 100%;
height: 100%;
} 
.home_over_master .top .right11 {
    margin: 13px 0 0 5px;
}

.home_over_master .top .right11 p {
    margin: 0 0 3px;
    font-size: 14px;
} 
.home_over_master .top .right11 span {
    font-size: 12px;
    color: #fa5741;
} 

.home_over_master .top .right p {
    font-size: 14px;
}
.home_over_master .top .right {
    flex: 1;
    display: flex;
    justify-content: right;
    align-items: center;
}
.home_over_master .top .right .fasong {
    border-radius: 5px;
    border: 1px solid #21b97a;
    text-align: center;
    line-height: 30px;
    color: #21b97a;
    font-size: 14px;
    width: 74px;
    height: 30px;
}
.home_over_master .txt {
    font-size: 14px;
    width: 355px;
}
#think-like {
    width: 355px;
    height: 52px;
    color: #333;
    font-weight: 700;
    /* margin-left: 10px ; */
    border-bottom: 1px #999 solid ;
}
/* .van-grid, .van-hairline--top {
    
} */
</style>
